import Poster from './components/poster'
import Scroll from './components/scroll'
import styles from './App.module.css'
import Loading from './components/loading'
import { useAppStore } from './stores/app.js';
import clsx from "clsx";

function App(){
    const store = useAppStore();

    const handleSetMode = (mode) => {
        store.setMode(mode)

        const body = document.getElementsByTagName('body')[0];
        if(body){
            if(mode === 'grid') {
                body.classList.add('rotate360');
            } else {
                body.classList.add('rotateN360');
            }

            setTimeout(()=>{
                body.classList.remove('rotateN360');
                body.classList.remove('rotate360');
            }, 2000);
        }
    }

    return (
        <div className={styles.app}>
            {
                store.loading ? <Loading/> : ''
            }
            <Poster/>
            {/*<Scroll/>*/}

            <div className={styles.mode}>
                <span className={clsx(styles.button, store.mode === 'grid' && styles.current)} onClick={() => handleSetMode('grid')}>Grid</span>
                <span className={clsx(styles.button, store.mode === 'slider' && styles.current)} onClick={() => handleSetMode('slider')}>Slider</span>
                <div className={clsx(styles.btnBg, store.mode === 'grid' && styles.left)}></div>
            </div>
        </div>
    )
}

export default App